<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script type="text/javascript" src="../lib/vue/dist/vue.js"></script>
    <style>

        .active{


            background-color: #8cebff;
        }

    </style>
</head>
<body>
 <div id="app">


     <audio :src="getSongSrc" autoplay controls></audio>
     <ul>
         <li v-for='(item,index) in musicData' :class="{active:curIndex == index}" @click="changeSong(index)">

             <h2>{{item.id}} - 歌名:{{item.name}}</h2>
             <p> 歌手:{{item.author}}</p>

         </li>

     </ul>



 </div>
<script>

    var musicData = [
        {id:1,name:'于荣光 - 少林英雄',author:'于荣光',songSrc:'./static/于荣光 - 少林英雄.mp3'},
        {id:2,name:'Joel Adams - Please Dont Go',author:'Joel Adams',songSrc:'./static/Joel Adams - Please Dont Go.mp3'},
        {id:3,name:'MKJ - Time',author:'MKJ',songSrc:'./static/MKJ - Time.mp3'},
        {id:4,name:'Russ - Psycho (Pt. 2)',author:'Russ',songSrc:'./static/Russ - Psycho (Pt. 2).mp3'}
    ];


    new Vue({

        el:"#app",
        data:function () {
            return{
                musicData:musicData,
                curIndex:0,
                isActive:true
            }
        },
        computed:{

            getSongSrc:function () {

                return this.musicData[this.curIndex].songSrc
            }

        },
        methods:{

            changeSong:function (index) {
                this.curIndex = index;


            }


        }




    })


</script>




</body>
</html>